<template>
  <div class="visit">
      <Card>
          <p slot="title" class="card-title">
              <Icon type="md-map" style="margin-right: 5px"></Icon>近一周订单数统计
          </p>
          <div style="height: 300px;">
              <apexchart
                  type="bar"
                  height="280"
                  :options="chartOptions"
                  :series="series"
              />
          </div>
      </Card>
  </div>
</template>

<script>
import {queryWeekData} from "@/api/hmzd/hmOrder";

export default {
  name: "visitVolume",
  data() {
      return {
          series: [],
          chartOptions: {},
      }
  },
  methods: {
      init() {
          let option = {
              colors: ["#398af7"],
              chart: {
                  stacked: true,
                  toolbar: {
                      show: false,
                  },
                  zoom: {
                      enabled: false,
                  },
              },
              plotOptions: {
                  bar: {
                      columnWidth: "40%",
                      horizontal: false,
                  },
              },
              xaxis: {
                  categories: [],
              },
              legend: {
                  show: false,
              },
              dataLabels: {
                  enabled: false,
              },
              tooltip: {
                  enabled: true,
                  x: {
                      show: true,
                      format: "MMM dd日",
                  },
              }
          }
          queryWeekData().then(res =>{
              if(res.success){
                  let series = [];
                  for (let i = 0; i < res.data.length; i++) {
                      option.xaxis.categories.push(res.data[i].clickDate);
                      series.push(res.data[i].count);
                  }
                  this.chartOptions = option;
                  this.series = [
                      {
                          name: "订单数数",
                          type: "column",
                          data: [...series]
                      }
                  ];
              }
          })
      },
  },
  created() {
    this.init();
  },
};
</script>
<style lang="less">
.visit {
  .ivu-card-head {
    border-bottom: none !important;
  }
}
</style>
